<template>
  <div class="top-right-btn">
    <el-row>
      <!-- 显示筛选条件 -->
      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
        <el-button size="small" circle icon="el-icon-search" @click="toggleSearch()" />
      </el-tooltip>

      <!-- 刷新列表 -->
      <el-button size="small" circle icon="el-icon-refresh" @click="refresh()" />

      <!-- 下载列表 -->
      <template v-if="showDownload">
        <el-dropdown trigger="click">
          <el-button size="small" circle style="margin:0 10px;" icon="el-icon-download" />
          <slot name="download" />
        </el-dropdown>
      </template>

      <!-- 显示|隐藏列 -->
      <template v-if="columns">
        <el-button size="small" circle icon="el-icon-s-operation" @click="showColumn()" />
      </template>
    </el-row>

    <el-drawer :title="title" :visible.sync="open" :direction="direction">
      <el-transfer v-model="value" class="columsTransfer" :titles="['显示', '隐藏']" :data="columns" @change="dataChange" />
    </el-drawer>
  </div>
</template>
<script>
export default {
  name: 'RightToolbar',
  props: {
    // 显示查询按钮
    showSearch: {
      type: Boolean,
      default: true
    },
    // 显示导入|导出按钮
    showDownload: {
      type: Boolean,
      default: false
    },
    // 显示钉钉按钮
    showDing: {
      type: Boolean,
      default: false
    },
    // 列
    columns: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: '显示/隐藏',
      // 是否显示弹出层
      open: false,
      // 弹出方向
      direction: 'rtl',
      Dingloading: false
    }
  },
  methods: {
    // 搜索
    toggleSearch() {
      this.$emit('update:showSearch', !this.showSearch)
    },
    // 刷新
    refresh() {
      this.$emit('queryTable')
    },
    // 右侧列表元素变化
    dataChange(data) {
      /* eslint-disable */
      for (var item in this.columns) {
        const key = this.columns[item].key
        this.columns[item].visible = !data.includes(key)
      }
    },
    // 打开显隐列dialog
    showColumn() {
      this.open = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}
.columsTransfer {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
}
</style>
